<template>
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count">剩余<strong>{{shengyu}}</strong></span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a :class="{selected:flag === 1}" href="#/" @click="$emit('changeFlag',1)" >全部任务</a>
      </li>
      <li>
        <a href="#/active" :class="{selected:flag === 2}" @click="$emit('changeFlag',2)">进行中</a>
      </li>
      <li>
        <a href="#/completed" :class="{selected:flag === 3}" @click="$emit('changeFlag',3)">已完成</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" @click="$emit('delCompleted')">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: {
    list: Array,
    flag:Number
  },
  //计算剩余属性
  computed: {
    shengyu(){
     return this.list.filter(item=> item.isDone === false).length
    }
  }
};
</script>

<style>
</style>